<template>
	<view class="">

		<view class="tabbar-container" style="height: 100%;">
			<block>

				<view class="Tabbar-Box" :style="$utils.disposeSafeBottomFun()">

					<view class="GirdBox">
						<view class="tabbar-item" v-for="(item,index) in  groups[0]" :key="index"
							@click="switchTabbar(item.APFunName)">
							<view class="item-top">

								<uni-icons :color="currentIndex==item.APFunName ? '#51d0d0' : '#707070'"
									fontFamily="CustomFont" :size="24">{{currentIndex==item.APFunName
									?  $utils.toUniCode(item.inPIC_PH) :  $utils.toUniCode(item.PIC_PH)}}</uni-icons>
							</view>
							<view class="item-bottom" :class="[currentIndex == item.APFunName ? 'item-active' : '']">
								<text>{{ item.APFunName }}</text>
							</view>
						</view>
					</view>

					<view class="tabbar-item center-item" @click.stop="changeItemBtn">
						<view class="item-top">
							<image src="/static/image/TabBar/add-white.png"
								:style="{ transform: 'rotate(' + rotation + 'deg)',transition: 'transform 0.2s ease' }">
							</image>
						</view>
					</view>

					<view class="GirdBox">
						<view class="tabbar-item" v-for="(item,index) in groups[1]" :key="index"
							@click="switchTabbar(item.APFunName)">
							<view class="item-top">
								<uni-icons :color="currentIndex==item.APFunName ? '#51d0d0' : '#707070'"
									fontFamily="CustomFont" :size="24">{{currentIndex==item.APFunName
						?  $utils.toUniCode(item.inPIC_PH) :  $utils.toUniCode(item.PIC_PH)}}</uni-icons>
							</view>

							<view class="item-bottom" :class="[currentIndex == item.APFunName ? 'item-active' : '']">
								<text>{{ item.APFunName }}</text>
							</view>
						</view>
					</view>
				</view>

			</block>
		</view>


		<uni-popup ref="ShowPopup" type="bottom" zIndex="10075" @maskClick="close" background-color="#fff"
			border-radius="10px 10px 0 0">
			<view class="PopupTop">
				<view class="Popup_Top_Box">
					<view class="EditClass">
						<view class="Left_Box">工作台</view>
					</view>
				</view>
				<scroll-view class="scroll-Y MainPopupBox" :scroll-top="0" scroll-y="true">
					<view class="GirdMaxBox">

						<u-grid v-if="groups[2].length" :border="false" col="4">
							<u-grid-item v-for="(item,index) in groups[2]" :key="index"
								@click="ChoiceModule(item,index)">
								<view class="PopupGirdBox">
									<uni-icons :color="currentIndex==item.APFunName ? '#51d0d0' : '#707070'"
										fontFamily="CustomFont" :size="24">{{currentIndex==item.APFunName
											?  $utils.toUniCode(item.inPIC_PH) :  $utils.toUniCode(item.PIC_PH)}}</uni-icons>
								</view>
								<text class="grid-text">{{item.APFunName}}</text>
							</u-grid-item>
						</u-grid>
					</view>
				</scroll-view>

				<!-- </view> -->
			</view>
		</uni-popup>
	</view>

</template>


<script>
	export default {
		props: ['backData', 'groups'],
		data() {
			return {
				currentIndex: this.$store.state.CRaftModule.MesBasicInfo.TabBarName || '首页',
				rotation: 0, // + 图标旋转位置
				ShowPopup: false
			}
		},
		methods: {
			CancelEditBtn() { // 取消按钮

			},
			close() {
				this.rotation = 0;
				this.ShowPopup = false;
				this.$refs.ShowPopup.close();

			},
			changeItemBtn() {
				let that = this;
				this.rotation += 45;
				if (this.rotation >= 90) {
					this.rotation = 0;
				}

				that.ShowPopup = !that.ShowPopup;
				if (that.ShowPopup) {
					that.$refs.ShowPopup.open();
				} else {
					that.$refs.ShowPopup.close();
				}
			},
			ChoiceModule(item) {
				var that = this
				console.log(item);

				
				that.rotation = 0;
				that.$refs.ShowPopup.close();
				that.ShowPopup = false
				that.$store.state.CRaftModule.MesBasicInfo.WorkbenchesTitle = item.APFunName
				uni.navigateTo({
					url: item.AP_Link,
					animationType: 'slide-in-right', // 动画类型
					animationDuration: 500 // 动画时长
				});
			},
			switchTabbar(e) {
				var that = this
				// console.log(e);
				const obj = that.backData.find(item => item.APFunName == e)
				that.currentIndex = obj.APFunName

				if (that.currentIndex != this.$store.state.CRaftModule.MesBasicInfo.TabBarName) {
					that.rotation = 0;
					that.$store.state.CRaftModule.MesBasicInfo.TabBarName = obj.APFunName

					that.$store.commit('CRaftModule/ChangeAndSetStateData', {
						Name1: 'MesBasicInfo',
						data: that.$store.state.CRaftModule.MesBasicInfo
					})
					
					uni.redirectTo({
						url: obj.AP_Link,
						animationType: 'slide-in-right', // 动画类型
						animationDuration: 500 // 动画时长
					});


				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	// @import "/static/assets/css/moldfont/iconfont.css";

	
	@font-face {
		font-family: CustomFont;
		src: url('/static/assets/css/moldfont/iconfont.ttf');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 24px;
	}

	.tab-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		border-top: 1px solid #dedee0;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 10px 0;
	}

	.tabbar-item {

		flex: 1;
		height: 46px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;


		.item-top {
			width: 40px;
			height: 36px;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.item-bottom {
			font-size: 14px;
			width: 100%;
		}
	}

	.item-active {
		/* color: #4cbbff; */
		color: #51d0d0;
	}

	.center-item {
		flex: 0.5 !important;
		display: block;
		position: relative;

		.item-top {
			flex-shrink: 0;
			width: 44px;
			height: 44px;
			position: absolute;
			padding: 2px;
			/* top: -30px; */
			top: 0;
			/* left: calc(50% - 50px); */
			left: 50%;
			transform: translateX(-50%);
			border-radius: 50%;
			box-shadow: 0px 1px 19px -10px #999;
			background-color: #ffffff;

			image {
				/* background-color: #4cbbff; */
				background-color: #51d0d0;
				border-radius: 50%;
				padding: 4px;
			}

			.item-bottom {
				position: absolute;
				bottom: 5px;
			}
		}
	}


	.PopupTop {
		width: 100%;
		// height: 80vh;
		// background-color: #fff;
		padding-bottom: 60px;
		display: flex;
		flex-direction: column;

		.Popup_Top_Box {
			.EditClass {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 6px 8px;

				.Left_Box {
					padding: 4px 10px;
				}

				.Right_Box {
					padding: 4px 10px;
					border-radius: 12px;

				}

				// 编辑按钮
				.EditText {
					border: 1px solid #ebebeb;
					background-color: #fff;
				}

				// 保存按钮
				.SaveText {
					color: #1ea751;
				}
			}
		}

		.MainPopupBox {
			height: 30vh;
			padding: 8rpx 30rpx 20rpx;

			.GirdMaxBox {
				// margin-top: 10px;

				.u-grid {
					margin-top: 20px;

					.u-grid-item {
						margin-bottom: 14px;

						.grid-text {
							display: block;
							height: 40px;
							width: 60px;
							// line-height: 40px;
							text-align: center;
							font-size: 14px;
							margin-top: 6px;
						}
					}
				}
			}
		}
	}



	.tabbar-container {
		width: 100%;
		height: 50px;
		// box-shadow: 0 0 9px -5px #999;
		display: flex;
		align-items: center;
		// padding: 5px 0;
		color: #999999;
		background-color: #fff;
		z-index: 99999;
		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);

		.Tabbar-Box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 100%;
			z-index: 99999;
			background: #fff;
			// box-shadow: 0 0 9px -5px #999;
			border-top: 1px solid #eaeaea;
			padding: 6px 0;

			.GirdBox {
				flex: 1;
				display: flex;
				// justify-content: space-evenly;
				justify-content: space-around;
				align-items: center;
			}

			.tabbar-item {
				// width: 24%;
				flex: 1;
				height: 46px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;

				.item-top {
					width: 40px;
					height: 36px;
					// padding: 10px 4px;
					display: flex;
					align-items: center;
					justify-content: center;
					// background-color: pink;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item-bottom {
					font-size: 14px;
					width: 100%;
				}
			}

			.item-active {
				/* color: #4cbbff; */
				color: #51d0d0;
			}

			.center-item {
				flex: 0.5 !important;
				display: block;
				position: relative;

				.item-top {
					flex-shrink: 0;
					width: 44px;
					height: 44px;
					position: absolute;
					padding: 2px;
					/* top: -30px; */
					top: 0;
					/* left: calc(50% - 50px); */
					left: 50%;
					transform: translateX(-50%);
					border-radius: 50%;
					box-shadow: 0px 1px 19px -10px #999;
					background-color: #ffffff;

					image {
						/* background-color: #4cbbff; */
						background-color: #51d0d0;
						border-radius: 50%;
						padding: 4px;
					}

					.item-bottom {
						position: absolute;
						bottom: 5px;
					}
				}
			}
		}
	}
</style>